<style scoped>
/*@import './index.css';*/
.fourOne {
  width: 200px;
  height: 200px;
  background: red;
}
.notFourOne {
  width: 200px;
  height: 200px;
  background: yellow;
}
.notFourTow {
  width: 200px;
  height: 200px;
  background: blue;
}
</style>
<template>
  <div class="page">
    <div class="main">
      <div class="four" v-if="this.page != 4">Now you see me
        <div class="fourOne"></div>
      </div>
      <div class="notFour" v-else>Now you don't
        <div class="notFourOne"></div>
        <div class="notFourTow"></div>
      </div>
    </div>
    <button v-on:click="test">Test</button>
    <button v-on:click="increase">点击加一</button>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      testArray: [
        { index: 1, name: 11111111111 },
        { index: 2, name: 22222222222 },
        { index: 3, name: 33333333333 },
        { index: 4, name: 44444444444 },
        { index: 5, name: 55555555555 },
        { index: 6, name: 66666666666 },
        { index: 7, name: 77777777777 },
        { index: 8, name: 88888888888 }
      ],
      page: 0,
      count: 0
    }
  },
  mounted: function () {},
  methods: {
    increase: function () {
      this.count++
      console.log(this.count)
    },
    test: function () {
    //   if (this.page < 5) {
      this.page++
      //   }
      console.log(this.page)
      //   for (let i = 0; i < 6; i++) {

      //   }
    }
  },
  components: {}
}
</script>
